<template>
    <el-table :data="itemList" row-key="id" size='medium' style="margin-top:20px" border>
        <!-- <el-table-column label="拖拽排序" width="80">
          <template slot-scope="{row}">
            <i class="el-icon-rank allowDrag" style="cursor:pointer" />
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="id" label="id" width="100" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="key" prop="key" :show-overflow-tooltip="true"/>
        <el-table-column label="是否显示" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange(scope.row)"
              >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" width="80px" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" placeholder="请输入" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column label="列名" prop="showName" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.showName" placeholder="请输入" clearable></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="宽" prop="width" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.width" placeholder="请输入" clearable></el-input>
          </template>
        </el-table-column> -->
        <el-table-column label="关联字段" prop="relatedModel" width="200px" :show-overflow-tooltip="true">
          <template slot-scope="scope" v-if="scope.row.fieldTypeKey=='ForeignKey'">
            <div>
              <el-input style="width: 50%;" v-model="scope.row.relatedModel" placeholder="请输入" clearable></el-input>
              <el-input style="width: 50%;" v-model="scope.row.relatedKey" placeholder="请输入" clearable></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="组件类型" prop="formType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-select v-model="scope.row.formType" placeholder="请选择" clearable>
              <el-option v-for="item in dictOptions.formType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="关联单据" prop="relatedForm" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- <el-input v-model="scope.row.relatedForm" placeholder="请输入" clearable></el-input> -->
            <searchBar formKey="form" :flag="scope.$index" :content="scope.row.relatedForm?scope.row.relatedForm:''" @click="searchBarClick"></searchBar>
          </template>
        </el-table-column>
        <el-table-column prop="redact" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button @click="saveAction(scope.row)" type="text" size="small">保存</el-button>
          </template>
        </el-table-column>
        <RecordDialog ref="RecordDialog" @rowClick="rowClick"></RecordDialog>
      </el-table>
      
</template>
<script>
import { getFieldFormOptionByTableKey } from '@/api/interface/form.js'
import { findFilterList, updateFilter } from "@/api/interface/filter.js"
export default {
  components: {},
  props: {
    formId: {
      type: [Number, String],
      default : ''
    }
  },
  data() {
    return {
        isShow: false,
        form: {},
        itemList: [],
        dictOptions: {},
        currentIndex: 0
    }
  },
  watch: {
    formId: {
      immediate: true,
      deep: true,
      handler(val){
        this.getFieldByForm()
        this.getFieldFormDictFun()
      }
    },
  },
  methods:{
    searchBarClick(formKey, flag){
      this.currentIndex = flag
      switch (formKey) {
          case 'form':
              break;
          default:
              break;
      }
      this.$refs.RecordDialog.formKey = formKey
      this.$refs.RecordDialog.show()
    },
    rowClick(formKey, val){
        switch (formKey) {
            case 'form':
                this.$set(this.itemList[this.currentIndex], 'relatedForm', val.id)
                break;
            default:
                break;
        }
    },
    getFieldByForm(){
      findFilterList({
        form: this.formId
      }).then(res=>{
        if(res.data.code==10000){
          this.itemList = res.data.data.list
        }
      })
    },
    handleTabClick(e){
      switch (e.name) {
        case 'fieldForm':
          break;
        case 'fieldList':
          break;
        default:
          break;
      }
    },
    // 状态发生改变
    switchChange(e) {
      updateFilter({
        filterId: e.id,
        status: e.status,
      }).then((res) => {
        if (res.data.code == 10000) {
          this.getFieldByForm();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      })
    },
    // 保存
    saveAction(form){
      form.filterId = form.id
      if(!form.width){
        delete form.width
      }
      updateFilter(form).then((res) => {
        if (res.data.code == 10000) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      })
    },
    // 获取字典
    getFieldFormDictFun(){
      getFieldFormOptionByTableKey({
        tableKey: 'interface_fieldform'
      }).then(res=>{
        if(res.data.code == 10000){
          this.dictOptions = res.data.data
        }
      })
    },
  },
}
</script>